<template>
  <div class="main-layout">
    <div class="post-detail-card face-verify-card">
      <div class="post-detail-content face-verify-content">
        <h2 class="face-verify-title">人脸识别验证</h2>
        <div class="face-capture-box">
          <FaceCapture ref="faceCaptureRef" />
        </div>
        <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
        <div class="btn-row">
          <button class="verify-btn glow-btn" @click="handleVerify" :disabled="isVerifying">
            {{ isVerifying ? '识别中...' : '提交识别' }}
          </button>
          <button class="cancel-btn glow-btn" @click="handleCancel">退出登录</button>
        </div>
        <div class="retry-info">剩余重试次数：{{ 3 - retryCount }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import api from '@/services/api'
import FaceCapture from '@/components/FaceCapture.vue'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()
const faceCaptureRef = ref(null)
const retryCount = ref(0)
const errorMsg = ref('')
const isVerifying = ref(false)

async function handleVerify() {
  if (!faceCaptureRef.value.photoFile) {
    errorMsg.value = '请先拍摄人脸照片'
    return
  }
  isVerifying.value = true
  errorMsg.value = ''
  const formData = new FormData()
  formData.append('file', faceCaptureRef.value.photoFile)
  try {
    const res = await api.faceRecognition(formData)
    const result = JSON.parse(res.data.data)
    if (result.verified) {
      authStore.setFaceVerified(true)
      router.push({ name: 'home' })
    } else {
      retryCount.value++
      errorMsg.value = '人脸识别失败，请重试'
      if (retryCount.value >= 3) {
        authStore.logout()
      }
    }
  } catch {
    errorMsg.value = '识别请求失败'
  } finally {
    isVerifying.value = false
  }
}
function handleCancel() {
  authStore.logout()
}
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: var(--color-bg);
}
.post-detail-card.face-verify-card {
  width: 100%;
  max-width: 1200px;
  margin: 2.5rem auto 0 auto;
  background: var(--color-input-bg);
  border-radius: 0.7rem;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  padding: 0;
  box-sizing: border-box;
  min-height: 300px;
}
@media (max-width: 700px) {
  .post-detail-card.face-verify-card {
    max-width: 100%;
    padding: 0;
    margin-top: 0.7rem;
  }
}
.post-detail-content.face-verify-content {
  padding: 2.5rem 1.5rem 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 700px) {
  .post-detail-content.face-verify-content {
    padding: 1.5rem 0.5rem 2rem 0.5rem;
  }
}
.face-verify-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}
.face-capture-box {
  width: 260px;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 18px 4px var(--color-primary-glow, rgba(64, 158, 255, 0.18));
  border-radius: 0.5rem;
  background: var(--color-surface, var(--color-input-bg));
  padding: 1rem 0.5rem;
}
.error-msg {
  color: var(--color-danger, #e53935);
  background: var(--color-danger-bg, #fff0f0);
  border-radius: 0.3rem;
  padding: 0.5rem 1rem;
  margin: 0.7rem 0 0.5rem 0;
  font-size: 1rem;
  text-align: center;
}
.btn-row {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.5rem;
}
.verify-btn,
.cancel-btn {
  min-width: 120px;
  max-width: 100%;
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  transition:
    background 0.2s,
    box-shadow 0.2s,
    color 0.2s;
  text-align: center;
}
.verify-btn {
  background: var(--color-primary);
  color: var(--color-button-text);
}
.verify-btn:hover:not(:disabled),
.glow-btn.verify-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
  color: var(--color-button-text);
  box-shadow: 0 0 28px 10px var(--color-primary-glow, #5eb3ff);
}
.verify-btn:disabled {
  background: var(--color-button-disabled-bg);
  color: var(--color-button-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.cancel-btn {
  background: var(--color-danger, #e53935);
  color: var(--color-button-text);
}
.cancel-btn:hover,
.glow-btn.cancel-btn:hover {
  background: var(--color-danger-hover, #ff4d4f);
  color: var(--color-button-text);
  box-shadow: 0 0 28px 10px var(--color-danger-glow, rgba(227, 36, 36, 0.9));
}
.retry-info {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-bottom: 0.7rem;
  text-align: center;
}
</style>
